<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center">
		<view class="navBar w-full pl-30  pr-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold text-center pl-60">
				族谱查询
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>


		<view class="w-690 mt-60">
			<wd-form ref="form" size="large" :model="formData">
				<wd-cell-group border>
					<wd-input label="姓名" label-width="100px" prop="name" clearable v-model="formData.name"
						placeholder="姓名" :rules="[{ required: true, message: '姓名' }]" />
				</wd-cell-group>
				<view class="w-full mt-30">
					<wd-button type="primary" size="large" @click="handleSubmit" block>查询</wd-button>
				</view>
			</wd-form>
		</view>


		<wd-popup v-model="show" closable safe-area-inset-bottom position="bottom"
			custom-style="border-radius:32rpx 32rpx 0 0;padding:30rpx;height:60vh;" @close="">
			<view class="w-full flex-center pt-10 pb-30 f-32">查询结果</view>
			<view class="list-item flex flex-col  p-40" v-for="(item,index) in searchList" :key="index"
				v-if="searchList.length" @click="$toPage(`/pages/tree/index?id=${item.id}`)">
				<text class="text-592E22 text-600 f-28">姓名：{{ item.name }}</text>
				<view class="flex text-592E22 text-600 f-28 mt-10">
					<text class="flex-none">生于：</text>
					<text>{{ item.birthDate }} {{ item.birthPlace }}</text>
				</view>

				<view class="flex text-592E22 text-600 f-28 mt-10" v-if="item.lifeStatus === '已故'">
					<text class="flex-none">卒于：</text>
					<text>{{ item.deathDate }} {{ item.deathPlace }}</text>
				</view>
			</view>
			<view class="h-full flex-center text-999" v-else>暂无数据~</view>
		</wd-popup>

	</view>
</template>

<script setup>
	import { onHide } from '@dcloudio/uni-app';
	import dayjs from 'dayjs';
	const {
		api_get_familyByName
	} = useRequest();

	const show = ref(false)
	const searchList = ref([])

	const form = ref(null)
	const formData = reactive({
		name: '',
	})

	const handleSubmit = () => {
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					api_get_familyByName(formData).then(res => {
						searchList.value = res
						show.value = true
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	onHide(() => {
		show.value = false
		searchList.value = []
	})
</script>

<style lang="scss" scoped>
	.list-item {
		width: 690rpx;
		height: 210rpx;
		background-image: url('@/static/bg-21.png');
		background-size: 100% 100%;
	}
</style>